<template>
  <div>
    <Header></Header>
    <section
      data-test="page-section"
      data-section-theme="white-bold"
      class="page-section layout-engine-section background-width--inset section-height--medium content-width--medium horizontal-alignment--center vertical-alignment--middle has-background softwareMain white-bold"
      data-section-id="6073ff55c64f9762a2a3667b"
      data-controller="SectionWrapperController"
      data-animation="none"
      data-controllers-bound="SectionWrapperController"
      style="padding-top: 267.656px"
      data-active="true"
    >
      <div class="section-border">
        <div class="section-background" style="top: 267.656px">
          <img
            alt=""
            data-src="../assets/imgs/unsplash-image-XX2WTbLr3r8.jpg"
            data-image="../assets/imgs/unsplash-image-XX2WTbLr3r8.jpg"
            data-image-dimensions="2500x1667"
            data-image-focal-point="0.5,0.5"
            data-load="false"
            elementtiming="nbf-background"
            src="../assets/imgs/unsplash-image-XX2WTbLr3r8.jpg"
            width="2500"
            height="1667"
            sizes="(max-width: 799px) 200vw, 100vw"
            style="display: block; object-position: 50% 50%"
            srcset="
              ../assets/imgs/unsplash-image-XX2WTbLr3r8.jpg?format=100w   100w,
              ../assets/imgs/unsplash-image-XX2WTbLr3r8.jpg?format=300w   300w,
              ../assets/imgs/unsplash-image-XX2WTbLr3r8.jpg?format=500w   500w,
              ../assets/imgs/unsplash-image-XX2WTbLr3r8.jpg?format=750w   750w,
              ../assets/imgs/unsplash-image-XX2WTbLr3r8.jpg?format=1000w 1000w,
              ../assets/imgs/unsplash-image-XX2WTbLr3r8.jpg?format=1500w 1500w,
              ../assets/imgs/unsplash-image-XX2WTbLr3r8.jpg?format=2500w 2500w
            "
            fetchpriority="high"
            loading="eager"
            decoding="async"
            data-loader="sqs"
          />
          <div class="section-background-overlay" style="opacity: 0.08"></div>
        </div>
      </div>
      <div class="content-wrapper" style="">
        <div class="content">
          <div
            class="sqs-layout sqs-grid-12 columns-12"
            data-type="page-section"
            id="page-section-6073ff55c64f9762a2a3667b"
          >
            <div class="row sqs-row">
              <div class="col sqs-col-12 span-12">
                <div
                  class="sqs-block html-block sqs-block-html"
                  data-block-type="2"
                >
                  <div class="sqs-block-content">
                    <div class="sqs-html-content">
                      <h1
                        style="
                          text-align: center;
                          white-space: pre-wrap;
                          transition-timing-function: ease;
                          transition-duration: 0.65s;
                          transition-delay: 0.264s;
                        "
                        class="preScale scaleIn"
                      >
                        Ask Anything
                        <em style="font-weight: 500">Contact us</em>
                      </h1>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section
      data-test="page-section"
      data-section-theme="white"
      class="page-section layout-engine-section background-width--full-bleed section-height--small content-width--wide horizontal-alignment--center vertical-alignment--middle white"
      data-section-id="6072ee1ae0dff50b4ab7e486"
      data-controller="SectionWrapperController"
      data-animation="none"
      data-controllers-bound="SectionWrapperController"
      data-active="true"
    >
      <div class="content-wrapper">
        <div class="content">
          <div
            class="sqs-layout sqs-grid-12 columns-12"
            data-type="page-section"
          >
            <div class="row sqs-row">
              <div class="col sqs-col-5 span-5">
                <div
                  class="sqs-block map-block sqs-block-map sized vsize-12"
                ></div>
                <div
                  class="sqs-block html-block sqs-block-html"
                  data-block-type="2"
                >
                  <div class="sqs-block-content">
                    <div class="sqs-html-content">
                      <h2
                        style="
                          white-space: pre-wrap;
                          transition-timing-function: ease;
                          transition-duration: 0.65s;
                          transition-delay: 0.3s;
                        "
                        class="preScale scaleIn"
                      >
                        Contact us.
                      </h2>
                      <p
                        class="preFade fadeIn firstp"
                        style="
                          white-space: pre-wrap;
                          transition-timing-function: ease;
                          transition-duration: 0.65s;
                          transition-delay: 0.313043s;
                        "
                      >
                        <strong>Chanson Holdings Limited</strong>
                      </p>
                      <p
                        class="preFade fadeIn"
                        style="
                          white-space: pre-wrap;
                          transition-timing-function: ease;
                          transition-duration: 0.65s;
                          transition-delay: 0.326087s;
                        "
                      >
                        (+852) 97972801
                      </p>
                      <p
                        class="preFade fadeIn"
                        style="
                          white-space: pre-wrap;
                          transition-timing-function: ease;
                          transition-duration: 0.65s;
                          transition-delay: 0.33913s;
                        "
                      >
                        Flat A, 14F Queen’s Centre,
                      </p>
                      <p
                        class="preFade fadeIn"
                        style="
                          white-space: pre-wrap;
                          transition-timing-function: ease;
                          transition-duration: 0.65s;
                          transition-delay: 0.352174s;
                        "
                      >
                        58-64 Queen’s Road East
                      </p>
                      <p
                        class="preFade fadeIn"
                        style="
                          white-space: pre-wrap;
                          transition-timing-function: ease;
                          transition-duration: 0.65s;
                          transition-delay: 0.365217s;
                        "
                      >
                        Wan Chai, Hong Kong
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col sqs-col-1 span-1">
                <div
                  class="sqs-block spacer-block sqs-block-spacer sized vsize-1"
                  data-block-type="21"
                  id="block-51914d4f559fa048ecd5"
                >
                  <div class="sqs-block-content">&nbsp;</div>
                </div>
              </div>
              <div class="col sqs-col-6 span-6">
                <div
                  class="sqs-block form-block sqs-block-form"
                  data-block-type="9"
                  id="block-564f5ad7ec7487adf7c0"
                >
                  <div class="sqs-block-content">
                    <div
                      id="form-submission-html-6072ee1ae0dff50b4ab7e484"
                      class="sqs-form-block-submission-html"
                      data-submission-html=""
                    ></div>
                    <div class="form-wrapper">
                      <div class="form-inner-wrapper">
                        <form
                          data-form-id="6072ee1ae0dff50b4ab7e484"
                          data-success-redirect=""
                          data-dynamic-strings
                          autocomplete="on"
                          novalidate
                        >
                          <div class="field-list clear">
                            <fieldset
                              class="form-item fields name required"
                              style="display: flex"
                            >
                              <legend class="title" style="margin-left: 0;">
                                Name
                                <span
                                  class="required"
                                  style="
                                    opacity: 0.7;
                                    font-weight: 300;
                                    color: #000;
                                  "
                                  aria-hidden="true"
                                  >(required)</span
                                >
                              </legend>

                              <div class="field first-name first-nameCss">
                                <label class="caption">
                                  <span class="caption-text">First Name</span>
                                  <input
                                    class="field-element field-control"
                                    name="fname"
                                    x-autocompletetype="given-name"
                                    type="text"
                                    spellcheck="false"
                                    maxlength="30"
                                    data-title="First"
                                    aria-required="true"
                                  />
                                </label>
                              </div>
                              <div class="field last-name">
                                <label class="caption">
                                  <span class="caption-text">Last Name</span>
                                  <input
                                    class="field-element field-control"
                                    name="lname"
                                    x-autocompletetype="surname"
                                    type="text"
                                    spellcheck="false"
                                    maxlength="30"
                                    data-title="Last"
                                    aria-required="true"
                                  />
                                </label>
                              </div>
                            </fieldset>
                            <div class="form-item field email required">
                              <label class="title emiTitle">
                                Email

                                <span
                                  class="required"
                                  style="
                                    opacity: 0.7;
                                    font-weight: 300;
                                    color: #000;
                                  "
                                  aria-hidden="true"
                                  >(required)</span
                                >
                              </label>
                              <input
                                class="field-element"
                                id="email-yui_3_17_2_1_1553888888520_3745-field"
                                name="email"
                                type="email"
                                autocomplete="email"
                                spellcheck="false"
                                aria-required="true"
                              />
                            </div>
                            <div
                              id="textarea-yui_3_17_2_1_1553888888520_3747"
                              class="form-item field textarea required"
                            >
                              <label class="title emiTitle">
                                Message

                                <span
                                  class="required"
                                  style="
                                    opacity: 0.7;
                                    font-weight: 300;
                                    color: #000;
                                  "
                                  aria-hidden="true"
                                  >(required)</span
                                >
                              </label>
                              <textarea
                                class="field-element"
                                id="textarea-yui_3_17_2_1_1553888888520_3747-field"
                                aria-required="true"
                              ></textarea>
                            </div>
                          </div>

                          <div
                            data-animation-role="button"
                            class="form-button-wrapper form-button-wrapper--align-left"
                          >
                            <input
                              class="button sqs-system-button sqs-editable-button sqs-button-element--primary"
                              type="submit"
                              value="Send"
                            />
                          </div>

                          <!-- 校验 -->
                          <!-- <div class="hidden form-submission-text">Thank you!</div> -->
                          <div
                            class="hidden form-submission-html"
                            data-submission-html=""
                          ></div>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <Footer></Footer>
  </div>
</template>
<script>
import Header from "../components/header.vue";
import Footer from "../components/footer.vue";
export default {
  components: {
    Header,
    Footer,
  },
};
</script>
<style scoped>
@import url("../assets/css/common.css");
@media screen and (min-width: 768px),
  screen and (max-width: calc(1511px)) and (orientation: landscape) {
  h1 {
    font-size: calc((4 - 2) * 1.2vw + 1rem);
  }
  h2 {
    font-size: calc(1.8 * 1.2vw + 1rem);
    font-weight: 500;
  }
}
.section-border {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.page-section.section-height--medium:not(.content-collection):not(
    .gallery-section
  ):not(.user-items-list-section) {
  min-height: 66vh;
}
.section-background {
  overflow: hidden;
  pointer-events: none;
}
.page-section.background-width--inset:not(.content-collection):not(
    .gallery-section
  ):not(.user-items-list-section) {
  padding-top: 4vw;
  padding-right: 4vw;
  padding-bottom: 4vw;
  padding-left: 4vw;
}
.section-background,
.section-background .section-background-content,
.section-background .section-background-canvas,
.section-background .section-background-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.background-width--inset:not(.content-collection):not(.gallery-section):not(
    .user-items-list-section
  )
  .section-background {
  top: 4vw;
  right: 4vw;
  bottom: 4vw;
  left: 4vw;
  /* position: absolute; */
}
.sqs-block:not(.sqs-block-html):not(.sqs-block-markdown) {
  clear: both;
}
.sqs-row::before,
.sqs-row::after {
  content: "";
  display: block;
  clear: both;
}
.sqs-block-html .sqs-block-content *:not(h1):not(h2):not(h3),
.sqs-block-html .sqs-html-content *:not(h1):not(h2):not(h3) {
  word-wrap: break-word;
}
.tradiTip1 {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  width: 70%;
  left: 20%;
}
.section-background img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.section-background img {
  position: relative;
}
.section-border {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
h1 {
  color: #fff;
}
h1 {
  text-align: center;
  white-space: pre-wrap;
  transition-timing-function: ease;
  transition-duration: 0.65s;
  transition-delay: 0.32s;
}
.sqs-block-html .sqs-block-content > *:last-child,
.sqs-block-html .sqs-html-content > *:last-child {
  margin-bottom: 0;
}
.sqs-block-html .sqs-block-content > *:first-child,
.sqs-block-html .sqs-html-content > *:first-child {
  margin-top: 0;
}
.sqs-block-html .sqs-block-content,
.sqs-block-html .sqs-html-content {
  outline: none;
}
.sqs-block-html .sqs-html-content p {
  color: #999;
}
.sqs-block-html .sqs-html-content .firstp {
  color: #000;
}
.sqs-col-5 {
  width: 41.6667%;
}
[class*="sqs-col"] {
  float: left;
}
.sqs-layout:not(.sqs-editing)
  .sqs-row
  .sqs-block:not(.float):not(.sqs-feature-gated-wrapper):first-child {
  padding-top: 0;
}
.sqs-block:not(.sqs-block-html):not(.sqs-block-markdown) {
  clear: both;
}
.sqs-col .sqs-block {
  padding-left: 17px;
  padding-right: 17px;
}
.sqs-block {
  position: relative;
  height: auto;
  padding-top: 17px;
  padding-bottom: 17px;
}
.sqs-block.sized .sqs-block-content {
  overflow: hidden;
}
.sqs-block.vsize-12 {
  height: 408px;
  padding-top: 0;
}
.sqs-layout:not(.sqs-editing)
  > .sqs-row:first-child
  > [class*="sqs-col"]:first-child
  > .sqs-block:not(:first-child):last-child,
.sqs-layout:not(.sqs-editing)
  .sqs-block
  + .sqs-row
  .sqs-block:not(.float):last-child {
  padding-bottom: 17px;
}
.sqs-block-html {
  clear: none;
}
h2,
p {
  white-space: pre-wrap;
  transition-timing-function: ease;
  transition-duration: 0.65s;
  transition-delay: 0.3s;
}
.sqs-col:last-child {
  padding-right: 0;
}
.sqs-col-6 {
  width: 50%;
}
.form-wrapper,
.form-wrapper .form-inner-wrapper {
  display: grid;
  grid-template-areas: "form";
}
.form-wrapper {
  grid-area: form;
}
.form-wrapper .field-list .fields {
  margin: 0;
}
.form-wrapper .field-list .fields {
  column-gap: 10px;
}
.form-wrapper .field-list fieldset {
  row-gap: 0px;
}
.form-wrapper .field-list .fields.name .field {
  width: 50%;
}
.form-wrapper .field-list .field,
.form-wrapper .field-list .fields .field {
  margin: 0 0 18px;
}

.form-wrapper .field-list .fields .field {
  float: unset;
}
.sqs-block-form .field-list .field:not(.checkbox, .radio, .likert) {
  display: grid;
  align-content: flex-start;
  align-items: flex-start;
  grid-auto-flow: row;
  grid-template-columns: min-content auto;
  grid-template-rows: auto;
}
.form-wrapper .field-list fieldset,
.form-wrapper .field-list legend {
  margin: 0;
  padding: 0;
  border: 0;
}
.form-wrapper .field-list .field {
  position: relative;
  margin: 0 0 24px;
}
.form-wrapper .field-list .field {
  margin: 0 0 20px !important;
}
.form-wrapper .field-list .field {
  position: relative;
  margin: 0 0 24px;
}
.sqs-block-form .field-list .field:not(.checkbox, .radio, .likert) > * {
  grid-column: 1 / span 2;
}
.form-wrapper .field-list .field .caption {
  font-size: 12px;
  padding-bottom: 4px;
  margin-top: 4px;
  font-size: 16px;
}
.sqs-block-form .field-list .caption,
.sqs-block-form .field-list .caption > * {
  display: block;
  height: auto;
  word-break: break-word;
}
.form-wrapper .field-list .caption-text:not(:empty) {
  padding-bottom: 4px;
  margin-top: 4px;
}
.form-field-shape-square.form-field-border-all
  .sqs-block-form
  .form-item
  input:not([type="checkbox"]):not([type="radio"]),
.form-field-shape-square.form-field-border-all
  .sqs-block-form
  .form-item
  textarea,
.form-field-shape-square.form-field-border-all
  .sqs-block-form
  .form-item
  .file-display,
.form-field-shape-square.form-field-border-all
  .sqs-block-form
  .form-item
  select {
  border: solid 1px, #a9a9a9;
  border-radius: 0;
  box-shadow: 0 0 0 1px transparent;
}
.sqs-block-form .form-item input:not([type="checkbox"]):not([type="radio"]),
.sqs-block-form .form-item textarea,
.sqs-block-form .form-item .file-display,
.sqs-block-form .form-item select {
  padding: 10px;
}
.form-field-style-solid
  .sqs-block-form
  .form-item
  input:not([type="checkbox"]):not([type="radio"]),
.form-field-style-solid .sqs-block-form .form-item textarea,
.form-field-style-solid .sqs-block-form .form-item .file-display,
.form-field-style-solid .sqs-block-form .form-item select {
  background-color: rgb(252, 252, 252);
}
.first-nameCss {
  float: left !important;
}
.sqs-system-button {
  padding: 10px;
  background-color: #000;
  color: #fff;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
}
.emiTitle {
  margin: 4px 0;
}
@media screen and (max-width: 767px) {
  .softwareMain .section-background {
    top: 136px !important;
  }
  .softwareMain {
    padding-top: 136px !important;
  }
  .content [class*="sqs-col"] {
    float: none !important;
    width: 100% !important;
    padding-left: 17px;
  }
}

@media screen and (max-width: 767px) {
  .sqs-layout [class*="sqs-col"] {
    float: none !important;
    width: auto !important;
  }

  .sqs-layout .spacer-block {
    display: none;
  }

  .sqs-layout .sqs-row .sqs-block:first-child {
    padding-top: 17px !important;
  }

  .sqs-layout .sqs-row .sqs-block:last-child {
    padding-bottom: 17px !important;
  }

  .sqs-layout .sqs-row + .sqs-row,
  .sqs-layout .sqs-row + .sqs-block {
    margin-top: 0 !important;
  }

  .sqs-layout .sqs-gallery-design-grid-slide {
    width: 50% !important;
    clear: none !important;
  }

  .sqs-block-html > .sqs-block-content > h1[style*="margin-left"],
  .sqs-block-html > .sqs-block-content > h2[style*="margin-left"],
  .sqs-block-html > .sqs-block-content > h3[style*="margin-left"],
  .sqs-block-html > .sqs-block-content > h4[style*="margin-left"],
  .sqs-block-html > .sqs-block-content > h5[style*="margin-left"],
  .sqs-block-html > .sqs-block-content > h6[style*="margin-left"],
  .sqs-block-html > .sqs-block-content > p[style*="margin-left"] {
    margin-left: 0 !important;
  }
}
</style>
